<template>
  <div
    class="flex p-3 text-sm hover:bg-gray-100 cursor-pointer"
    :class="{ 'bg-gray-200': isActive }"
  >
    <div class="w-9 h-9">
      <el-avatar :class="{ 'bg-blue-400': isOnline }" :icon="deviceIcon" :size="36" />
    </div>
    <div class="px-3 flex-1 w-0">
      <div class="text-gray-950 size leading-none">{{ title }}</div>
      <div class="text-gray-400 text-ellipsis overflow-hidden whitespace-nowrap leading-none mt-2">
        {{ desc }}
      </div>
    </div>
    <div class="w-15 text-right">
      <div class="leading-none text-gray-600">#4469</div>
      <div class="leading-none text-gray-400 mt-2">2时1分前</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Iphone, Monitor } from '@element-plus/icons-vue'
import { computed } from 'vue'

interface Props {
  title: string
  desc: string
  isPhone: boolean
  isOnline: boolean
  isActive: boolean
}

const props = defineProps<Props>()

const deviceIcon = computed(() => (props.isPhone ? Iphone : Monitor))
</script>

<style scoped></style>
